import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import withBase from '../withBase2';
import styles from './index.module.less';

const C2 = (props) => {
  const { className, tag, focused, command, onChange } = props;

  window.console.log('---render---1---', tag, focused);

  useEffect(() => {
    onChange(command);
  }, [command]);

  return <div className={classnames(styles.root, className)}>hello {tag}</div>;
};

C2.defaultProps = {
  className: null,
  tag: '',
  focused: false,
  command: null,
  onChange: () => {},
};

C2.propTypes = {
  className: PropTypes.any,
  tag: PropTypes.string,
  focused: PropTypes.bool,
  command: PropTypes.any,
  onChange: PropTypes.func,
};

export default React.memo(withBase(C2));
